<template>
    <div class="overall-preview">
        <div class="overall-preview-title">
            {{ $t('portal.previewEffect') }}
        </div>
        <div class="overall-preview-content">
            <div :style="{ backgroundColor: navBgColor }" class="overall-preview-content-nav">
                <div :style="{ backgroundColor: systemThemeColor }"  class="overall-preview-content-nav-item"></div>
            </div>
            <div class="overall-preview-content-right">
                <div class="overall-preview-content-right-buttons">
                    <div :style="{backgroundColor: systemThemeColor}">{{ $t('common.base.operation') }}</div>
                    <div>{{ $t('common.base.operation') }}</div>
                    <div>{{ $t('common.base.operation') }}</div>
                </div>
                <div class="overall-preview-content-right-table">
                    <div>
                        <div class="box"></div>
                    </div>
                    <div>
                        <div class="box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="large-box"></div>
                        <div class="gray-box"></div>
                        <div class="gray-box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="small-box"></div>
                    </div>
                    <div>
                        <div class="box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="large-box"></div>
                        <div class="gray-box"></div>
                        <div class="gray-box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="small-box"></div>
                    </div>
                    <div>
                        <div class="box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="large-box"></div>
                        <div class="gray-box"></div>
                        <div class="gray-box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="small-box"></div>
                    </div>
                    <div>
                        <div class="box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="large-box"></div>
                        <div class="gray-box"></div>
                        <div class="gray-box"></div>
                        <div :style="{backgroundColor: systemThemeColor}" class="small-box"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "preview",
    props:{
        navBgColor: {
            type: String,
            default: '#2D3F4C'
        },
        systemThemeColor: {
            type: String,
            default: '#13C2C2'
        }
    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 11px !important;
    height: 11px !important;
    border: 1px solid #EBEEF5 !important;
    border-radius: 1.58px !important;
    background-color: #fff !important;
}
.gray-box {
    background-color: #F2F6FC !important;
    width: 117px !important;
}
.small-box {
    width: 43px !important;
}
.large-box {
    width: 117px !important;
}
.overall-preview {
    &-title {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 4px;
    }
    &-content {
        height: 300px;
        width: 100%;
        border-radius: 1.58px;
        border: 1px solid #DCDEE0;
        display: flex;
        &-nav {
            width: 100px;
            height: 100%;
            &-item {
                position: relative;
                top: 64px;
                width: 100%;
                height: 32px;
            }
        }
        &-right {
            flex: 1;
            padding: 10px;
            &-buttons {
                display: flex;
                div {
                    border-radius: 3px;
                    width: 80px;
                    height: 26px;
                    text-align: center;
                    line-height: 26px;
                    margin-right: 6px;
                    color: #fff;
                    font-size: 11px;
                }
                div:not(:first-child) {
                    border: 1px solid #DCDEE0;
                    background-color: #F5F8FA;
                    color: #595959;
                }
            }
            &-table {
                margin-top: 10px;
                div {
                    width: 100%;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    div {
                        height: 10px;
                        margin: 0 10px;
                    }
                }
                div:nth-child(2n + 1) {
                    background-color: #FAFAFA;
                }
            }
        }
    }
}
</style>